<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的购物车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }

        .cartItem {
            display: flex;
            justify-content: flex-start;
            background: rgba(255, 255, 255, 1);
            padding: 0.5rem;
            margin-top: 0.3rem;
        }

        .cartImg {
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }

        .cartGoodsInfo {
            display: flex;
            flex-direction: column;
        }

        .cartGoodsName {
            font-size: 0.7rem;
            height: 1.675rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 0.9rem;
        }

        .cartItemPrice {
            margin-top: 0.2rem;
            display: flex;
            justify-content: flex-start;
        }

        .dms {
            display: inline-block;
            width: 1.2rem;
            height: 1.2rem;
            border: 0.1rem solid rgba(204, 204, 204, 1);
            margin-right: 0.5rem;
            text-align: center;
        }

        .cartOpt {
            margin-top: 0.2rem;
        }

        .inputNum {
            display: inline-block;
            width: 2.5rem;
            height: 1.2rem;
            border: 0.1rem solid rgba(204, 204, 204, 1);
            text-align: center;
        }

        .add {
            display: inline-block;
            width: 1.2rem;
            height: 1.2rem;
            border: 0.1rem solid rgba(204, 204, 204, 1);
            margin-left: 0.5rem;
            text-align: center;
        }

        .priceNum {
            margin-left: 1rem;
            width: 9rem;
            height: 0.8rem;
            display: flex;
            justify-content: space-between;
        }

        .salePrice {
            margin-top: 0.5rem;
            width: 3rem;
            height: 0.65rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 37, 16, 1);
            line-height: 0.522rem;
        }

        .orgPrice {
            width: 2rem;
            height: 0.4rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 1.5rem;
        }

        .num {
            width: 0.6rem;
            height: 0.45rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
            margin-right: 0.5rem;
            line-height: 1.5rem;
        }

        .lastItem {
            margin-bottom: 2.6rem;
        }

        .footerOpt {
            display: flex;
            flex-direction: row;
            height: 2.5rem;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0rem 0rem 3rem rgba(229, 229, 229, 0.78);
            justify-content: flex-end;
            position: fixed;
            bottom: 2.5rem;
        }

        .settleBtn {
            width: 6rem;
            height: 2.5rem;
            background: rgba(255, 147, 38, 1);
            text-align: center;
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
            vertical-align: center;
            line-height: 2.5rem;
        }

        .showPrice {
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .showPrice .tempPrice {
            width: 2.525rem;
            height: 0.65rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            line-height: 1.5rem;
        }

        .fare {
            width: 2.4rem;
            height: 0.6rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 1rem;
            text-align: center;
        }

        .optPrice {
            margin-right: 1rem;
        }

        .cart-null {
            height: 100%;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .null-img {
            height: 40%;
            text-align: center;
            line-height: 20rem;
            vertical-align: bottom;
        }

        .null-img img {
            height: 5.5rem;
            width: 8rem;
        }

        .null-desc {
            text-align: center;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(170, 170, 170, 1);
            line-height: 1rem;
        }

        .shop-btn-container {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }

        .shop-btn {
            height: 2rem;
            width: 10rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 2rem 2rem 2rem 2rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            text-align: center;
            line-height: 2rem;
        }

        .last-item {
            margin-bottom: 2.6rem;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
       <!-- <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">购物车</h1>
        </header>-->
        <nav class="bar bar-tab">
            <a class="tab-item" href="./index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="./category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item active" href="./cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item" href="./personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div id="cart-container">
                <!--<div class="cartItem">
                    <div class="cartImg">
                        <img class="cartImg" src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                        />
                    </div>
                    <div class="cartGoodsInfo">
                        <div class="cartGoodsName">
                            dfgdf更好地相结合韩国反动f的方式大幅回升黄色的说如果好的
                        </div>
                        <div class="cartOpt">
                            <span class="dms">-</span>
                            <span class="inputNum">1</span>
                            <span class="add">+</span>
                        </div>
                        <div class="cartItemPrice">
                            <div class="salePrice">￥369</div>
                            <div class="priceNum">
                                <div class="orgPrice">￥999.00</div>
                                <div class="num">X1</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
                <div class="cart-null">
                    <div class="null-img">
                        <img src="image/cart_null.png" />
                    </div>
                    <div class="null-desc">亲，购物车暂无商品</div>
                    <div class="shop-btn-container">
                        <div class="shop-btn" onclick="jumpCategory()">去逛逛吧</div>
                    </div>
                </div>
            </div>
            <div class="footerOpt hidden">
                <div class="optPrice">
                    <div class="showPrice">
                        合计:
                        <span class="tempPrice">￥754.00</span>
                    </div>
                    <div class="fare">
                        不含运费
                    </div>
                </div>
                <div class="settleBtn" onclick="payments();">
                    结算(2)
                </div>
            </div>
        </div>
    </div>
        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="./js/index.js"></script>
        <!--<script type="text/javascript" src="./js/jquery.touchSwipe.min.js"></script>-->
</body>
<script>
    $(function () {
        loadCart();
    });

    function payments() {
        window.location.href = "./my/payPage.html?q=null";
    }
    /**
     * 减
     */
    function dms(cartId, quantity) {
        quantity = parseInt(quantity);
        if (quantity <= 1) {
            $.alert("在减就没了");
            return;
        }
        $.post(prefix + "/userCart/api/addQuantity", {
            'cartId': cartId,
            'quantity': quantity - 1
        }, function (data) {
            data = JSON.parse(data);
            if (data.code === 0) {
                loadCart("1");
            }
        });
    }
    /**
     * 加
     */
    function add(cartId, quantity) {
        quantity = parseInt(quantity);
        $.post(prefix + "/userCart/api/addQuantity", {
            'cartId': cartId,
            'quantity': quantity + 1
        }, function (data) {
            data = JSON.parse(data);
            if (data.code == 0) {
                loadCart("1");
            }
        });
    }

    function loadCart() {
        $.getJSON(prefix + "/userCart/api/getUserCart", function (data) {
            var cartList;
            var cartItemHtml = "";
            var size = 0;
            if (data.code == 0) {
                cartList = data.userCartList;
                $(".showPrice .tempPrice").text("￥" + data.cartSubTotal);
                $.each(cartList, function (index, item) {
                    if (index + 1 == cartList.length) {
                        cartItemHtml += '<div class="cartItem last-item">' +
                            '<div class="cartImg"><img class="cartImg" src="' + item.flThumbnail +
                            '"/>' +
                            '</div>' +
                            '<div class="cartGoodsInfo">' +
                            '<div class="cartGoodsName">' +
                            item.flName +
                            '</div>' +
                            '<div class="cartOpt">' +
                            '<span class="dms" onclick="dms(\'' + item.flId + '\',\'' + item.flQuantity +
                            '\');">-</span>' +
                            '<span class="inputNum">' + item.flQuantity + '</span>' +
                            '<span class="add" onclick="add(\'' + item.flId + '\',\'' + item.flQuantity +
                            '\');">+</span>' +
                            '</div>' +
                            '<div class="cartItemPrice">' +
                            '<div class="salePrice">￥' + item.flPrice + '</div>' +
                            '<div class="priceNum">' +
                            '<div class="orgPrice">￥' + item.flOriginPrice + '</div>' +
                            '<div class="num">X' + item.flQuantity + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        size = size + 1;
                    } else {
                        cartItemHtml += '<div class="cartItem">' +
                            '<div class="cartImg"><img class="cartImg" src="' + item.flThumbnail +
                            '"/>' +
                            '</div>' +
                            '<div class="cartGoodsInfo">' +
                            '<div class="cartGoodsName">' +
                            item.flName +
                            '</div>' +
                            '<div class="cartOpt">' +
                            '<span class="dms" onclick="dms(\'' + item.flId + '\',\'' + item.flQuantity +
                            '\');">-</span>' +
                            '<span class="inputNum">' + item.flQuantity + '</span>' +
                            '<span class="add" onclick="add(\'' + item.flId + '\',\'' + item.flQuantity +
                            '\');">+</span>' +
                            '</div>' +
                            '<div class="cartItemPrice">' +
                            '<div class="salePrice">￥' + item.flPrice + '</div>' +
                            '<div class="priceNum">' +
                            '<div class="orgPrice">￥' + item.flOriginPrice + '</div>' +
                            '<div class="num">X' + item.flQuantity + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        size = size + 1;
                    }
                });
                if (size != 0 && cartItemHtml != "") {
                    $("#cart-container").html(cartItemHtml);
                    $(".footerOpt").removeClass("hidden");
                    $(".settleBtn").text("结算(" + size + ")");
                }
            }
        })
    }

    function jumpCategory() {
        window.location.href="./category.html"
    }
</script>

</html>
